<template>
  <div>
    <!--  展示用户列表-->
    <div class="content" v-show="isFirst"><h1>欢迎使用</h1></div>
    <div class="content" v-show="isLoading"><h1>加载中</h1></div>
    <div class="content" v-show="errMsg" style="color: red"><h1>{{ errMsg }}</h1></div>
    <div>
      <div class="content" v-show="respondData.length">
        <div class="card" v-for="data in respondData" :key="data.id">
          <a :href="data.html_url" target="_blank">
            <img :src="data.avatar_url" style="width:100px" alt=""/>
            <br>
          </a>
          <span>{{ data.login }}</span>
        </div>
      </div>
      <div class="content" v-show="!isLoading&&!isFirst&&respondData.length&&errMsg"><h1>搜索结果为空</h1></div>
    </div>
  </div>
</template>


<script>
export default {
  name: "MyList",
  data() {
    return {
      isFirst: true, //初次展示
      isLoading: false,//加载中
      errMsg: '',//错误信息
      respondData: [],


    }
  },
  mounted() {
    this.$bus.$on('upDatalistData', (isFirst, isLoading, errMsg, respondData) => {
      this.isLoading = isLoading
      this.isFirst = isFirst
      this.errMsg = errMsg
      this.respondData = respondData;
    })
  }

}
</script>


<style scoped>
.content {
  width: 800px;
  margin: 10px auto;
  display: flex;
  flex-wrap: wrap;
  //background-color: blue;
  justify-content: flex-start;
  align-content: flex-start;
}

.card {
  margin: 15px 15px;
  width: 150px;
  height: 150px;
  text-align: center;
  //background-color: orange;
}

span {
  display: block;
  text-align: center;
}

h1 {
  margin: auto;
}

</style>